<template>
  <div>
    <div class="w_100 headTips d_f m_t_20">
      <div class="line"></div>
      原始财务报表
    </div>
    <div class="d_f m_t_20  a_i_c">
      <el-button :icon="Upload" @click="dialogVisible = true">上传财务报表</el-button>

      <img src="../../assets/fileIcon.png" alt="" class="icon m_l_20" @click="templateUrl">
      <div class="size m_l_5" @click="templateUrl">下载财务报表模板</div>
    </div>
    <mytable :fields="originalFields" width="110" :isHight="false" :defaultList="originalRecords" ref="tableRef"
      class="m_t_20" :isSelection="false" :isPaginationShow="false">
      <template v-slot:operation="{ row }">
        <div class="d_f j_c_s_b">
          <span class="edit" @click="downloadUrl(row)">下载</span>
        </div>
      </template>
    </mytable>
    <div class="w_100 headTips d_f m_t_20">
      <div class="line"></div>
      财务报表分析
    </div>
    <div class="liabilities d_f a_i_c m_t_20">资产负债表</div>
    <div class="formArrow d_f a_i_c m_t_20">
      <img src="../../assets/formArrow.png" alt="">
      <span>短期偿债能力指标</span>
    </div>
    <mytable :fields="repaymentFields" width="110" :handle="false" :serial="false" :isHight="false"
      :defaultList="records" ref="tableRef" class="m_t_20" :isSelection="false" :isPaginationShow="false">
    </mytable>
    <div class="formArrow d_f a_i_c m_t_20">
      <img src="../../assets/formArrow.png" alt="">
      <span>经营能力指标</span>
    </div>
    <mytable :fields="operateFields" width="110" :handle="false" :serial="false" :isHight="false" :defaultList="records"
      ref="tableRef" class="m_t_20" :isSelection="false" :isPaginationShow="false">
    </mytable>
    <div class="liabilities d_f a_i_c m_t_20">利润表</div>
    <div class="formArrow d_f a_i_c m_t_20">
      <img src="../../assets/formArrow.png" alt="">
      <span>盈利能力指标</span>
    </div>
    <mytable :fields="profitFields" width="110" :handle="false" :serial="false" :isHight="false" :defaultList="records"
      ref="tableRef" class="m_t_20" :isSelection="false" :isPaginationShow="false">
    </mytable>
    <div class="formArrow d_f a_i_c m_t_20">
      <img src="../../assets/formArrow.png" alt="">
      <span>成长能力指标</span>
    </div>
    <mytable :fields="growUpFields" width="110" :handle="false" :serial="false" :isHight="false" :defaultList="records"
      ref="tableRef" class="m_t_20" :isSelection="false" :isPaginationShow="false">
    </mytable>
    <div class="formArrow d_f a_i_c m_t_20">
      <img src="../../assets/formArrow.png" alt="">
      <span>现金流指标</span>
    </div>
    <mytable :fields="cashFlowFields" width="110" :handle="false" :serial="false" :isHight="false"
      :defaultList="records" ref="tableRef" class="m_t_20" :isSelection="false" :isPaginationShow="false">
    </mytable>
    <el-dialog v-model="dialogVisible" title="上传财务报表" width="500" :before-close="handleClose">
      
      <div class="financialStatements">
        <myform :fields="fields" ref="formRef" :rules="rules" :model="model" class="m_t_16">
      </myform>
      <div class="back d_f j_c_c a_i_c" v-if="!model.url">
          <el-upload class="upload-demo" :action="action" :headers="headers" :show-file-list="false"
          :before-upload="beforeUpload" :on-success="onSuccess" multiple :limit="100000000">
            <el-button type="primary" :icon="Upload" plain>点击上传</el-button>
          </el-upload>
        </div>
        <div class="back d_f  a_i_c " v-else>
          <div class="d_f j_c_s_b w_100 a_i_c">
            <div class="d_f a_i_c " @click="downloadUrl">
              <img src="../../assets/container.png" alt="" class="container">
              <div class="m_l_20">
                <div class="fileName">{{ fileName }}</div>
                <div class="size1">{{ size }}</div>
              </div>
            </div>
            <el-upload class="upload-demo" :action="action" :headers="headers" :show-file-list="false"
            :before-upload="beforeUpload" :on-success="onSuccess" multiple :limit="100000000">
              <div class="tips">重新上传</div>
            </el-upload>
          </div>
        </div>
          <div class="d_f m_t_20 a_i_c tips c_p" @click="templateUrl">
            <el-icon>
              <Download />
            </el-icon>
            下载财务报表模版
          </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="query">
            确 认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount,ref } from 'vue'
import { financeList, fileListByPage, financeInfo, financeUpload } from '../../api/agent'
import { useRoute, useRouter } from 'vue-router'
import { httpConfig } from '../../utils/config'
import { Upload } from '@element-plus/icons-vue'
import { fileFormat } from '../../utils/date'
import { Message } from '../../utils/resetMessage'
import {copy,formatFileSize} from '../../utils/date'
import {financialStatementsType} from './data'
const model={
  url:'',
  time:'',
  projectId:'',
  nodeId:'',
  nodeName:'',
}
export default defineComponent({
  name: '',
  props: {
    nodeId: {
      type: String,
      default: '',
    },
    nodeName: {
      type: String,
      default: '',
    }
  },
  setup(props: any) {
    const data = reactive({
      originalFields: [
        {
          label: '上传时间',
          prop: 'createTime',
          width: '300px',
        },
        {
          label: '对应任务节点',
          prop: 'nodeName',
          width: '250px',
        },
        {
          label: '统计期限',
          prop: 'time',
          width: '100px',
        },
      ],
      repaymentFields: [
        {
          label: '统计时期',
          prop: 'data',
          width: '150px',
        },
        {
          label: '资产负债率',
          prop: 'debtToAssetRatio',
          width: '150px',
        },
        {
          label: '流动比率',
          prop: 'currentRatio',
          width: '150px',
        },
        {
          label: '速动比率',
          prop: 'quickRatio',
          width: '150px',
        },
        {
          label: '现金比率',
          prop: 'cashRatio',
          width: '150px',
        },
        {
          label: '齿轮比率',
          prop: 'gearingRatio',
          width: '150px',
        },
        {
          label: '有息负债比率',
          prop: 'interestBearingDebtRatio',
          width: '150px',
        },
      ],
      operateFields: [
        {
          label: '统计时期',
          prop: 'data',
          width: '150px',
        },
        {
          label: '总资产周转率',
          prop: 'totalAssetTurnover',
          width: '150px',
        },
        {
          label: '流动资产周转率',
          prop: 'currentAssetTurnover',
          width: '150px',
        },
        {
          label: '应收账款周转率',
          prop: 'accountsReceivableTurnover',
          width: '150px',
        },
        {
          label: '预付账款周转率',
          prop: 'prepaidExpensesTurnover',
          width: '150px',
        },
        {
          label: '存货周转率',
          prop: 'inventoryTurnover',
          width: '150px',
        },
        {
          label: '应付账款周转率',
          prop: 'accountsPayableTurnover',
          width: '150px',
        },
        {
          label: '预收账款周转率',
          prop: 'unearnedRevenueTurnover',
          width: '150px',
        },
        {
          label: '营运资金周转率',
          prop: 'workingCapitalTurnover',
          width: '150px',
        },
        {
          label: '营运资金（万元）',
          prop: 'workingCapital',
          width: '200px',
        },
        {
          label: '利息保障倍数',
          prop: 'interestCoverageRatio',
          width: '200px',
        },
      ],
      profitFields: [
        {
          label: '统计时期',
          prop: 'data',
          width: '150px',
        },
        {
          label: '销售（营业）毛利润率',
          prop: 'grossProfitMargin',
          width: '150px',
        },
        {
          label: '资产利润率',
          prop: 'returnOnAssets',
          width: '150px',
        },
        {
          label: '营业净利润率',
          prop: 'netProfitMargin',
          width: '150px',
        },
        {
          label: '净资产收益率',
          prop: 'returnOnEquity',
          width: '150px',
        },
      ],
      growUpFields: [
        {
          label: '统计时期',
          prop: 'data',
          width: '150px',
        },
        {
          label: '销售增长率',
          prop: 'salesGrowthRate',
          width: '150px',
        },
        {
          label: '净资产增长率',
          prop: 'equityGrowthRate',
          width: '150px',
        },
      ],
      cashFlowFields: [
        {
          label: '统计时期',
          prop: 'data',
          width: '150px',
        },
        {
          label: '销售现金比率',
          prop: 'cashFlowFromSalesRatio',
          width: '150px',
        },
        {
          label: '盈利现金比率',
          prop: 'cashFlowToIncomeRatio',
          width: '150px',
        },
        {
          label: '强制支付比率',
          prop: 'mandatoryPaymentRatio',
          width: '150px',
        },
      ],
      fields: [
        {
          label: "统计期限",
          prop: 'time',
          placeholder: '请输入统计期限：2022-2023格式',
          type: 'input',
          labelWidth: '80px',
        },
      ],
      rules: {
        time: [
          { required: true, message: '请输入统计期限', trigger: 'blur' },
        ],
      },
      model:copy(model),
      records: [],
      action: httpConfig.upload,
      headers: {
        token: localStorage.getItem('Token')
      },
      originalRecords: [],
      url: '',
      dialogVisible: false,
      fileName:'',
      size:'',
    })
    const route = useRoute()
    const formRef=ref()
    onBeforeMount(() => {
      methods.getData()
      methods.getList()
    })
    const methods = {
      getData() {
        // route.query.projectId as string
        financeList({ projectId: route.query.projectId as string, nodeId: props.nodeId, url: data.url }).then((res: any) => {
          data.originalRecords = res
        })
      },
      beforeUpload(file: any) {
        return fileFormat(file, ['xls', 'xlsx'], '只能上传xls，xlsx')
      },
      onSuccess(e: any, file: any) {
        if (e.code == '000000') {
          data.model.url=e.data
          console.log(file);
          data.fileName=file.name
          data.size = formatFileSize(file.size)
          // data.url = e.data
          // methods.getData()
        } else {
          Message({ type: 'error', message: e.msg })
        }
      },
      downloadUrl(row) {
        window.open(row.url, '_blank')
      },
      templateUrl() {
        fileListByPage({ id: 'FILE_TEMPLATE', itemType: 'FINANCE_EXECL' }).then((res: any) => {
          if (res.records.length == 0) return Message({ type: 'error', message: '模版不存在' })
          window.open(res.records[0].url, '_blank')
        })
      },
      getList() {
        financeInfo({ projectId: route.query.projectId as string,  }).then((res: any) => {
          data.records = res
        })
      },
      handleClose() {
        data.dialogVisible = false
        data.model=copy(model)
      },
      query(){
        if(!data.model.url)return  Message({ type: 'error', message: '请上传财务报表' })
        formRef.value.verification().then(()=>{
      data.model.nodeId=props.nodeId
      data.model.nodeName=props.nodeName
      data.model.projectId=route.query.projectId as string
          financeUpload(data.model).then((res: any) => {
          methods.handleClose()
          methods.getData()
          methods.getList()
      })
        })
       
      }
    }
    return {
      ...toRefs(data),
      ...methods, Upload,formRef
    }
  }
})
</script>
<style scoped lang='scss'>
.icon {
  width: 10px;
  height: 12px;
  cursor: pointer;
}

.size {
  color: #1878FF;
  font-size: 14px;
  cursor: pointer;
}

.liabilities {
  background: rgba(24, 120, 255, 0.04);
  width: calc(100% - 20px);
  height: 37px;
  padding: 0px 10px;
  color: #1878FF;
  font-size: 15px;
}
.back {
  width: calc(100% - 40px);
  height: 110px;
  background: rgba(211, 215, 222, 0.2);
  border-radius: 4px;
  padding: 0px 20px;
  position: relative;
}
.size1 {
  color: rgba(0, 0, 0, 0.4);
  font-size: 11px;
  margin-top: 2px;
  cursor: pointer;
}

.fileName {
  color: rgba(0, 0, 0, 0.9);
  font-size: 16px;
  cursor: pointer;
}

.tips {
  color: #1878FF;
}
</style>
<style lang='scss'>
.financialStatements{
  .el-form-item{
    width: 70% !important;
    .el-form-item__content{
    width: 100% !important;
    .el-input{
      width: 100% !important;
    }
  }

  }
  
}
</style>